<template>
	<view class="min-h-[100vh] bg-background">
		<view class="px-[30rpx] py-[24rpx]">
			<view class="bg-white rounded-[8rpx]">
				<!-- <view class="py-[30rpx] flex border-b border-[#f6f6f6]">
					<up-image src="" width="136rpx" height="136rpx"></up-image>
					<view class="text-[24rpx] ml-[20rpx]">
						<view class="text-[26rpx] font-bold">百香果气泡饮</view>
						<view class="mt-[38rpx] text-[#666]">规格:10份装</view>
					</view>
				</view> -->
				<OrderDrinkList :list="order.appOrderGoodList"></OrderDrinkList>
				<view class="p-[30rpx] text-[26rpx] border-t border-[#f6f6f6]">
					<view class="text-[#666]">分享预约使用体验</view>
					<view class="flex items-center mt-[16rpx] mb-[30rpx]">
						<view class="mr-[24rpx]">评价</view>
						<up-rate v-model="data.score" :count="5" size="36rpx" gutter="16rpx"></up-rate>
					</view>
					<textarea
						class="p-[24rpx] rounded-[8rpx] bg-background h-[268rpx] w-full"
						placeholder="请输入评价内容（可不填）"
						maxlength="200"
						v-model="data.content"
					></textarea>
					<view class="mt-[24rpx] flex items-end">
						<up-upload @delete="deletePic" @afterRead="afterRead" :fileList="data.pics" multiple :maxCount="3" width="108rpx" height="108rpx"></up-upload>
					</view>
				</view>
			</view>
			<view class="confirm" @click="submitComment">提交</view>
		</view>
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getOrderDetail, orderComment } from '@/config/api/order';
import useUploadFile from '@/hooks/useUploadFile';
import utils from '@/utils/utils';
onLoad((options) => {
	data.orderGoodId = options.orderId - 0;
	queryOrderDetail();
});
const data = reactive({
	orderGoodId: 0,
	content: '',
	score: 5,
	pics: []
});
const order = ref({});
const { uploadFile } = useUploadFile();
// 删除图片
const deletePic = (event) => {
	data.pics.splice(event.index, 1);
};
// 新增图片
const afterRead = async (event) => {
	// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
	let lists = [].concat(event.file);
	let fileListLen = data.pics.length;
	lists.map((item) => {
		data.pics.push({
			...item,
			status: 'uploading',
			message: '上传中'
		});
	});
	for (let i = 0; i < lists.length; i++) {
		const result = await uploadFile(lists[i].url);
		let item = data.pics[fileListLen];
		data.pics.splice(fileListLen, 1, {
			...item,
			status: 'success',
			message: '',
			url: result.url
		});
		fileListLen++;
	}
};
const queryOrderDetail = async () => {
	try {
		const res = await getOrderDetail(data.orderGoodId);
		if (res.code == 200) {
			order.value = res.data;
		}
	} catch (e) {
		//TODO handle the exception
	}
};
const submitComment = async () => {
	try {
		const res = await orderComment({
			...data,
			pics: data.pics.map((item) => item.url)
		});
		if (res.code == 200) {
			utils.showToast('评论成功');
			setTimeout(() => {
				uni.navigateBack();
			}, 500);
		}
	} catch (error) {
		//TODO handle the exception
	}
};
</script>

<style lang="scss" scoped>
.confirm {
	@apply fixed left-[30rpx] bottom-[48rpx] w-[690rpx] h-[88rpx] border border-[#F48B6C] rounded-[16rpx] text-center text-[32rpx] text-[#FF4D1B] leading-[84rpx] bg-white;
}
</style>
